<template>
  <div>
    <el-container>
      <el-header class="left">
            <span class="left">账户设置</span>
            </el-header>
      <el-main>
        <div align="center">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
          <el-form-item  style="width:50%;">
          <el-upload
            class="avatar-uploader"
            :action="'http://localhost:88/api/oss/upload/oss?folder=myimages&classify=user_headPic'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="height:75px;"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>点击上方切换头像</span>
        </el-form-item>
            <el-form-item label="用户名:" prop="username"  style="width:50%;">
              <el-input :disabled="true" type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Email:" prop="email" style="width:50%;">
              <el-input :disabled="true" type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="旧密码:" prop="oldPassword" style="width:50%;">
              <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码:" prop="password" style="width:50%;">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPassword" style="width:50%;">
              <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        if (this.ruleForm.password !== "") {
          this.$refs.ruleForm.validateField("password");
        }
        callback()
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value !== this.ruleForm.oldPassword) {
        callback(new Error("新旧密码不一致!"));
      } else {
        if (this.ruleForm.checkPassword !== "") {
          this.$refs.ruleForm.validateField("checkPassword");
        }
        callback()
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        oldPassword: "",
        username: "",
        password: "",
        checkPassword: "",
        email: "",
        headPic: ''
      },
      imageUrl: '',
      rules: {
        oldPassword: [{ validator: validatePass1, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPassword: [{ validator: validatePass2, trigger: "blur" }]
      }
    }
  },
  methods: {
    async submitForm(formName) {
       this.$refs[formName].validate((valid) => {
             if (valid) {
                 this.ruleForm.id = 123
            console.log(this.ruleForm)
      const { data: res } = this.$http.post(`users/user/update`, this.ruleForm);
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.$router.push("/userSetting")
      }
            } else {
            console.log("error submit!!");
            return false;
            }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = file.response;
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style scoped>
.el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.header_right {
  margin-left: 15px;
}
</style>
